<template>
  <div class="bug-tag-container">
    <div class="bug-tag-container__info">
      <div class="bug-tag-container__info-title">{{ props.title }}</div>
      <div class="bug-tag-container__info-num" :title="props.number + ''">{{ props.number }}</div>
    </div>
    <div class="bug-tag-container__chart">
      <div ref="chartRef" style="width: 100%; height: 85px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref, onMounted, onUnmounted } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    title: {
      type: String,
      default: '未传入参数',
    },
    number: {
      type: Number,
      default: 0,
    },
    // 横轴的类型，字符串数组
    xAxisCategory: {
      type: Array as PropType<string[]>,
      default: () => [`${new Date().getMonth() + 1}月`, `${new Date().getMonth() < 1 ? 12 : new Date().getMonth()}月`],
    },
    // 每一列的数据
    yData: {
      type: Array as PropType<number[]>,
      default: () => [1, 10],
    },
    unit: {
      type: String,
      default: '个',
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  var timer: TimeoutHandle | null = null;
  const methods = {
    reload() {
      setOptions({
        grid: {
          left: '10%',
          right: '10%',
          bottom: '0%',
          top: '0%',
          containLabel: true,
        },
        legend: {
          show: false,
          data: ['bar'],
          textStyle: {
            color: '#ccc',
          },
        },
        xAxis: {
          data: props.xAxisCategory,
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            fontSize: 9,
          },
        },
        yAxis: {
          splitLine: { show: false },
          interval: 100,
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            rotate: 45,
            formatter: (value) => `${value}${props.unit}`,
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
            },
            data: props.yData,
          },
        ],
      });
    },
  };

  const deshark = (callback: () => void) => {
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      callback();
    }, 50);
  };
  const myObserver = new ResizeObserver(() => {
    // 宽度发生了变化
    deshark(methods.reload);
  });

  onMounted(() => {
    methods.reload();
    if (chartRef.value) {
      myObserver.observe(chartRef.value);
    }
  });
  onUnmounted(() => {
    // 清空下防止内存溢出
    if (chartRef.value) {
      myObserver.unobserve(chartRef.value);
      myObserver.disconnect();
    }
  });
</script>

<style lang="less" scoped>
  .bug-tag-container {
    width: 100%;
    display: flex;
    .bug-tag-container__info {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .bug-tag-container__info-title {
        font-size: 14px;
      }
      .bug-tag-container__info-num {
        font-size: 24px;
        font-weight: bold;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 10px;
      }
    }
    .bug-tag-container__chart {
      flex: 4;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
</style>
